<template>
  <div>
    <header-top title="通知详情" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div class="content clearfix bgff">
      <!--    内容区开始      -->

      <div v-if="notice"  class="notice-header">
        <h3>{{notice.title}}</h3>
        <span>{{notice.createTime.slice(0,19)}}</span>
      </div>

      <div v-if="notice" class="notice-text" v-html="notice.context">

      </div>

      <!--    内容区结束      -->
    </div>


  </div>
</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import {reqNoticePay, reqNoticeClass, reqNoticeSchool} from "@/api";

  export default {
        name: "noticeDetail",
      data(){
          return{
            notice:null,
          }
      },
    async mounted(){
        let noticeId = this.$route.query.id
        let type = this.$route.query.type

        if(type === 'SCHOOL'){
          const notices = await reqNoticeSchool(noticeId)
          this.notice = notices.data[0]
        }else if(type === 'CLASS'){
          const notices = await reqNoticeClass(null,noticeId)
          this.notice = notices.data[0]
        }if(type === 'PAY'){
          const notices = await reqNoticePay(null,noticeId)
          this.notice = notices.data[0]
        }
      },
      components:{
        headerTop:headerTop,
      },



  }
</script>

<style scoped>
  .notice-header{ width: 25rem; margin: 0 auto; padding: 1.6rem 0; border-bottom: 1px dashed #999999;}
  .notice-header h3{ font-size: 1.05rem;height: 1.05rem; line-height: 1.05rem; margin-bottom: 1rem;}
  .notice-header span{font-size: 1rem; color: #999; margin-right: 1rem;}
  .notice-text{ width: 25rem; margin: 1rem auto 1rem; font-size: 1rem; color: #666; line-height: 2rem;}

</style>
